<template>
  <div id="app">
    <div class="page-container">
      <HomePage v-if="activeItemIndex === 0"></HomePage>
      <MessagesPage v-if="activeItemIndex === 1"></MessagesPage>
      <User v-if="activeItemIndex === 2"></User>
    </div>
    <NavigationBar v-model="activeItemIndex" :items="navigationBarItems"></NavigationBar>
  </div>
</template>

<script>
import NavigationBar from './components/NavigationBar';
import HomePage from './pages/home';
import MessagesPage from './pages/messages';
import User from './pages/user';

export default {
  name: 'App',
  components: {
    NavigationBar,
    HomePage,
    MessagesPage,
    User
  },
  data() {
    return {
      navigationBarItems: [
        {
          icon: 'iconfont icon-home',
          color: 'rgb(153, 153, 153)',
          activeColor: 'rgb(254, 112, 62)',
          title: '首页'
        },
        {
          icon: 'iconfont icon-message',
          color: 'rgb(153, 153, 153)',
          activeColor: 'rgb(254, 112, 62)',
          title: '消息',
          badge: 4
        },
        {
          icon: 'iconfont icon-user',
          color: 'rgb(153, 153, 153)',
          activeColor: 'rgb(254, 112, 62)',
          title: '我的'
        }
      ],
      activeItemIndex: 1
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 414px;
  max-height: 734px;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  .page-container {
    flex: 1 auto;
    overflow: hidden;
  }
}
</style>
